<template>
  <div>
    <header>
      <el-form inline @submit.native.prevent ref="searchForm" :model="form">
        <el-form-item label="三方物流企业名称" prop="uscCode" class="base-search__form-item">
          <el-select clearable v-model="form.uscCode" filterable>
            <el-option
              v-for="(item, index) in tenantNameList"
              :key="index"
              :label="item.companyName"
              :value="item.uscCode"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item class="common-search__footer">
          <span @click="reset">重置</span>
          <span @click="submitSearch">搜索</span>
        </el-form-item>
      </el-form>
    </header>
    <nav class="common-nav mb30">
      <h2
        style="width: 140px"
        class="common-nav__title"
        :class="index === activeIndex ? 'tab_active' : ''"
        @click="switchNav(item, index)"
        v-for="(item, index) in navList"
        :key="index"
      >
        {{ item.name }}
      </h2>
    </nav>
    <main class="khy-data">
      <KhyCompanyInfo
        khySign="1"
        v-if="activeIndex == 0"
        :key="sfKey"
        :companyInfo="companyInfo"
        :relatedInfo="relatedInfo"
      >
        <div class="internet-item" v-if="companyInfo.khySkipName">
          <span @click="showInfo(companyInfo.khySkipName)">{{ companyInfo.khySkipName }}</span>
        </div>
      </KhyCompanyInfo>

      <BaseTable :columns="columns1" :key="sfKey" v-bind="wayBillTable" v-else-if="activeIndex == 1"></BaseTable>

      <BaseTable :columns="columns2" :key="sfKey" v-bind="transportTable" v-else-if="activeIndex == 2"></BaseTable>

      <BaseTable
        :columns="columns3"
        :key="sfKey"
        v-bind="corporateTransactTable"
        v-else-if="activeIndex == 3"
      ></BaseTable>

      <BaseTable :columns="columns4" :key="sfKey" v-bind="lawSuitTable" v-else-if="activeIndex == 4"></BaseTable>
    </main>
  </div>
</template>

<script>
import KhyCompanyInfo from '@/components/KhyCompanyInfo/index.vue'
import BaseTable from '@/components/BaseTable'
export default {
  name: 'khyDataList',
  components: {
    BaseTable,
    KhyCompanyInfo,
  },
  data() {
    return {
      sfKey: 1,
      columns1: [
        { label: '托运单号', prop: 'shipNumber' },
        { label: '运单号', prop: 'waybillNum' },
        { label: '运托人姓名', prop: 'shipperName' },
        { label: '托运人电话', prop: 'shipperPhone' },
        { label: '网络货运平台名称', prop: 'platformName' },
        {
          label: '风控等级',
          prop: 'riskLevel',
          render: (val, row) => {
            return val === '1' ? <p>低风险</p> : val === '2' ? <p>中风险</p> : <p>高风险</p>
          },
        },
        {
          label: '操作',
          prop: 'action',
          render: (val, row) => {
            return (
              <div>
                <a
                  onClick={() => {
                    this.transportDetail(row)
                  }}>
                  查看
                </a>
              </div>
            )
          },
        },
      ],
      columns2: [
        { label: '月份', prop: 'statisticalMonth' },
        { label: '发货量（吨）', prop: 'shippingWeight' },
        { label: '运费（元）', prop: 'shippingFee' },
        { label: '应付运费（元）', prop: 'dealWithFee' },
        { label: '可开司机票金额（元）', prop: 'invoicingAmount' },
        { label: '已开司机票金额（元）', prop: 'invoicedAmount' },
      ],
      columns3: [
        { label: '变更时间', prop: 'time' },
        { label: '变更前', prop: 'time1' },
        { label: '变更后', prop: 'time2' },
      ],
      columns4: [
        { label: '发布日期', prop: 'submitTime' },
        { label: '案件类型', prop: 'caseType' },
        { label: '案由', prop: 'caseReason' },
        { label: '案号', prop: 'caseNo' },
        { label: '案件名称', prop: 'title' },
        { label: '案件金额', prop: 'caseMoney' },

        {
          label: '涉案方',
          render: (val, row) => {
            return (
              <div>
                <p>原告：{row.plaintiff}</p>
                <p>被告：{row.defendant}</p>
              </div>
            )
          },
        },
        { label: '关键词', prop: 'docType' }, //转换
        {
          label: '裁判文书',
          render: (val, row) => {
            return (
              <div>
                {row.lawsuitUrl.indexOf('http') > -1 ? (
                  <el-button
                    type="text"
                    onClick={() => {
                      this.goDetail(row)
                    }}>
                    查看详情
                  </el-button>
                ) : (
                  <el-button type="text">查看详情</el-button>
                )}
              </div>
            )
          },
        },
      ],
      // 初始化时空白页
      isInit: 0,
      companyInfo: {},
      relatedInfo: [],
      wayBillTable: {
        pagination: {
          pageNo: 1,
          pageSize: 10,
          total: 0,
        },
        data: [],
        onChange: pagination => {
          Object.assign(this.wayBillTable.pagination, pagination)
          this.isInit++
          this.queryWayBillList()
        },
      },
      transportTable: {
        pagination: {
          pageNo: 1,
          pageSize: 10,
          total: 0,
        },
        data: [],
        onChange: pagination => {
          Object.assign(this.transportTable.pagination, pagination)
          this.isInit++
          this.queryTransportationList()
        },
      },
      corporateTransactTable: {
        pagination: false,
        data: [],
      },
      lawSuitTable: {
        pagination: {
          pageNo: 1,
          pageSize: 10,
          total: 0,
        },
        data: [],
        onChange: pagination => {
          Object.assign(this.lawSuitTable.pagination, pagination)
          this.isInit++
          this.queryLawSuitList(this.lawSuitTable.pagination)
        },
      },
      tenantNameList: [],
      form: {
        uscCode: '',
      },
      navList: [
        { name: '三方物流企业基本信息', id: 0 },
        { name: '运单信息', id: 1 },
        {
          name: '每月运输信息统计汇总',
          id: 2,
        },
        { name: '法人变更信息', id: 3 },
        { name: '法律纠纷', id: 4 },
      ],
      activeIndex: 0,
    }
  },

  mounted() {
    this.getTenantNameListRequest('', 1)
    //this.queryCompanyInfo(1);
    //this.queryRelateInfo();
  },
  methods: {
    /***
     * 查看运单详情
     *
     * @returns {Promise<void>}
     */
    transportDetail(e) {
      this.$router.push({
        name: 'transportDetail',
        query: e,
      })
    },
    /***
     * 关联托运方
     * 下拉选项
     * @returns {Promise<void>}
     */
    async queryRelateInfo() {
      const res = await this.$http.post('/khy/wayBill/getAgreement?uscCode=' + this.form.uscCode, { isLoading: false })
      this.relatedInfo = res ? res : []
    },
    /***
     * 查询企业基本名称
     * 下拉选项
     * @returns {Promise<void>}
     */
    async queryCompanyInfo(khySign) {
      this.companyInfo = {}
      const res = await this.$http.post(
        '/khy/wayBill/getCompanyInfo?uscCode=' + this.form.uscCode + '&&khySign=' + khySign,
        {
          isLoading: false,
        }
      )
      this.companyInfo = res
    },

    /***
     * 条件查询
     *
     * @returns {Promise<void>}
     */
    submitSearch() {
      if (!this.form.uscCode) {
        this.$message.warning('请输入搜索条件')
      } else {
        this.isInit++
        this.switchByActiveIndex()
      }
    },
    showInfo(khySkipName) {
      this.$router.push({
        name: 'interDataList',
        query: {
          khySkipName: khySkipName,
        },
      })
    },
    reset() {
      this.$refs.searchForm.resetFields()
    },
    switchNav(item, index) {
      if (this.activeIndex === index) return
      this.activeIndex = index
      //this.switchByActiveIndex();
    },
    switchByActiveIndex() {
      /*switch (this.activeIndex) {
        case 0:
          this.queryCompanyInfo(1)
          this.queryRelateInfo()
          break
        case 1:
          this.queryWayBillList()
          break
        case 2:
          this.queryTransportationList()
          break
        case 3:
          this.queryChangeInfoList()
          break
        case 4:
          this.queryLawSuitList()
          break
      }*/
      this.queryCompanyInfo(1)
      this.queryRelateInfo()
      this.queryWayBillList()
      this.queryTransportationList()
      this.queryChangeInfoList()
      this.queryLawSuitList()
      this.sfKey = new Date().getTime()
    },
    /***
     * 运单信息
     * @returns {Promise<void>}
     */
    async queryWayBillList() {
      const res = await this.$http.post('/khy/wayBill/getWayBillList', {
        ascs: [],
        descs: [],
        current: this.wayBillTable.pagination.pageNo,
        limit: this.wayBillTable.pagination.pageSize,
        uscCode: this.form.uscCode,
      })
      this.wayBillTable.data = res.records
      this.wayBillTable.pagination.total = res.total
    },
    /***
     * 运输信息统计
     * @returns {Promise<void>}
     */
    async queryTransportationList() {
      const res = await this.$http.post('/khy/wayBill/getTransport', {
        ascs: [],
        descs: [],
        current: this.transportTable.pagination.pageNo,
        limit: this.transportTable.pagination.pageSize,
        khySign: 1,
        uscCode: this.form.uscCode,
      })
      //console.log(res);
      this.transportTable.data = res.records
      this.transportTable.pagination.total = res.total
    },
    /***
     * 法人变更信息
     * @returns {Promise<void>}
     */
    async queryChangeInfoList() {
      const res = await this.$http.post('/khy/wayBill/getChangeInfo?uscCode=' + this.form.uscCode)
      this.corporateTransactTable.data = res.data
    },

    /***
     * 法律纠纷信息
     * @returns {Promise<void>}
     */
    async queryLawSuitList() {
      const res = await this.$http.post('/khy/wayBill/getLawSuit', {
        ascs: [],
        current: this.lawSuitTable.pagination.pageNo,
        limit: this.lawSuitTable.pagination.pageSize,
        uscCode: this.form.uscCode,
      })
      this.lawSuitTable.data = res.records
      this.lawSuitTable.pagination.total = res.total
    },

    /***
     * 法律纠纷详情信息
     *
     * @returns {Promise<void>}
     */
    goDetail(row) {
      let url = row.lawsuitUrl
      if (url.indexOf('http') === -1) {
        url = 'https://' + url
      }
      window.open(url, '__blank')
    },
    /***
     * 三方企业名称
     * 下拉选项
     * @returns {Promise<void>}
     */
    async getTenantNameListRequest(companyName, khySign) {
      const res = await this.$http.post(
        '/khy/wayBill/getCompanyNameList?companyName=' + companyName + '&&khySign=' + khySign,
        {
          isLoading: false,
        }
      )
      this.tenantNameList = res
    },
  },
}
</script>

<style lang="scss" scoped>
.common-search__footer {
  span {
    display: inline-block;
    text-align: center;
    border-radius: 1px;
    width: 136px;
    height: 36px;
    line-height: 36px;
    cursor: pointer;
    &:first-child {
      border: 1px solid $blue;
      color: $blue;
      margin-right: 10px;
    }
    &:last-child {
      background: $blue;
      color: $white;
      border: 1px solid transparent;
    }
  }
}
::v-deep {
  .base-search__form-item {
    margin-right: 40px;
  }
  .el-input {
    width: 260px;
  }
}
</style>
